<template>
  <el-descriptions
    class="margin-top"
    :column="3"
    border
  >
    <el-descriptions-item :span="1">
      <template #label>
        组织名称
      </template>
      {{ infoDetails.orgName }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        组织编码
      </template>
      {{ infoDetails.socialCode }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        报道标题
      </template>
      {{ infoDetails.title }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        报道等级
      </template>
      {{ awardFormatLevel(infoDetails.level) }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        获得时间
      </template>
      {{ infoDetails.getTime }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        主管单位
      </template>
      {{ infoDetails.competentDeptName }}
    </el-descriptions-item>
    <el-descriptions-item :span="3" width="100px">
      <template #label>
        报道内容
      </template>
      {{ infoDetails.content }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        报道媒体
      </template>
      {{ infoDetails.mediaCoverage }}
    </el-descriptions-item>
    <el-descriptions-item :span="2">
      <template #label>
        图片
      </template>
      <el-image v-for="item in JSON.parse(infoDetails.imgUrl)" :key="item" v-if="infoDetails.imgUrl" preview-teleported
                style="width: 60px; height: 60px;margin-right: 10px;"
                :src="item.response.data" :preview-src-list="getAwardImages(infoDetails.imgUrl)" fit="cover" />
      <span v-if="!infoDetails.imgUrl"></span>
    </el-descriptions-item>
    <el-descriptions-item :span="3" v-if="infoDetails.mpUrl">
      <template #label>
        视频
      </template>
      <video width="200" height="300" controls :src="item.response.data" v-for="item in JSON.parse(infoDetails.mpUrl)" :key="item" >
        您的浏览器不支持视频标签。
      </video>
    </el-descriptions-item>
  </el-descriptions>
</template>
<script setup>
import { computed, onMounted, ref, onUnmounted, reactive } from 'vue'
import { getDictByCode } from '@/views/yearCheck/ykb/mf/mf'

const awardLevelOptions = ref([])
const props = defineProps({
  infoDetails: {
    type: Object,
    default: () => {
    }
  }
})

function getAwardImages(str) {
  if (str) {
    let images = JSON.parse(str)
    let imageUrls = []
    for (let i = 0; i < images.length; i++) {
      imageUrls.push(images[i].response.data)
    }
    return imageUrls
  }
}
function awardFormatLevel(str) {
  for (let i = 0; i < awardLevelOptions.value.length; i++) {
    if (awardLevelOptions.value[i].id == str) {
      return awardLevelOptions.value[i].name
    }
  }
  return str
}

function getAwardLevelOptions() {
  getDictByCode('reportRecord').then(response1 => {
    awardLevelOptions.value = response1.data
    getDictByCode('rewardLevel').then(response => {
      awardLevelOptions.value.push(...response.data)
    })
  })
}

getAwardLevelOptions()
</script>
<style scoped lang="scss">

</style>
